<template>
  <div>
    <h4>作用域插槽</h4>
    <current-user :user="userInfo">
      <!-- 旧写法 -->
      <!-- <template slot="default" slot-scope="scope">
        <span>{{ scope.user.name }}</span>
      </template> -->
      <!-- 新写法 v-slot:[slotName]-->
      <template v-slot:default="slotProps">
        {{ slotProps.user.name }}
      </template>
      <!-- v-slot 可以缩写成# 缩写写法 -->
      <!-- <template #="slotProps"></template> -->
    </current-user>
  </div>
</template>

<script>
import currentUser from './components/currentUser';
export default {
  name: 'index2',
  components: {
    currentUser
  },
  data() {
    return {
      userInfo: {
        name: 'kk',
        lastName: 'sa',
        age: '10'
      }
    };
  }
};
</script>

<style lang="scss" scoped>
// a
</style>
